<template>
  <div>
    <!-- <section>
      <img class="full-width" src="/static/bg06.png" alt="">
    </section> -->
    <section class="section-2 relative">
      <p class="header">MEMBERSHIP UPDATE<span>会员单位信息变更登记</span></p>
      <div class="supplier-system">
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item label="申请单位名称" class="form-item mt60">
            <a-input v-decorator="['sqdwName',{ initialValue: '', rules: [{ required: true, message: '请输入申请单位名称' }],}]" placeholder="申请单位名称" autocomplete="off" />
          </a-form-item>
          <a-form-item label="填报人" class="form-item">
            <a-input v-decorator="['applyName',{ initialValue: '', rules: [{ required: true, message: '请输入填报人' }],}]" placeholder="填报人" autocomplete="off" />
          </a-form-item>
          <a-form-item label="职务" class="form-item">
            <a-input v-decorator="['zhiwu',{ initialValue: '', rules: [{ required: true, message: '请输入职务' }],}]" placeholder="职务" autocomplete="off" />
          </a-form-item>
          <a-form-item label="联系电话" class="form-item">
            <a-input v-decorator="['linkPhone',{ initialValue: '', rules: [{ required: true, message: '请输入联系电话' }],}]" placeholder="联系电话" autocomplete="off" />
          </a-form-item>
          <a-form-item label="选择变更信息" :label-col="{ span: 5 }" :wrapper-col="{ span: 19}">
            <a-radio-group v-model="updateType" @change="changeType">
              <a-radio :value="1">企业名称变更</a-radio>
              <a-radio :value="2">通讯地址变更</a-radio>
              <a-radio :value="3">联络员信息变更</a-radio>
            </a-radio-group>
          </a-form-item>
          <div v-if="updateType==1">
            <a-form-item label="原单位名称" class="form-item">
              <a-input v-decorator="['originName',{ initialValue: '', rules: [{ required: true, message: '请输入原单位名称' }],}]" placeholder="原单位名称" autocomplete="off" />
            </a-form-item>
            <a-form-item label="现单位名称" class="form-item">
              <a-input v-decorator="['replaceName',{ initialValue: '', rules: [{ required: true, message: '请输入现单位名称' }],}]" placeholder="现单位名称" autocomplete="off" />
            </a-form-item>
            <a-form-item label="上传工商变更证明材料扫描件、新营业执照正本或副本扫描件" class="form-item" >
              <a-row :gutter="24">
                <a-col :span="20">
                  <a-form-item label="文件名称">
                    <div class="from-item-input">
                      <template v-for="(item, i) in docIds">
                        <span :key="i" >{{item.name}}<a-icon class="tip" type="close" @click="deleteDoc(item,i)" /></span>
                      </template>
                    </div>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-upload name="fileName" accept=".doc,.zip,.png,.jpg,.jpeg,.docx,.xls,.xlsx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :multiple="true" :action="uploadUrl" :showUploadList="false" @change="handleChange" :headers="headers" >
                    <a-button  type="primary" class="s-btn">上传附件</a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-item>
            <div class="supplier-footer">
              <a-button  html-type="submit" type="primary" class="s-btn">
                提交
              </a-button>
            </div>
          </div>
          <div v-else-if="updateType==2">
            <a-form-item label="变更后地址" class="form-item">
              <a-input v-decorator="['replacexaddress',{ initialValue: '', rules: [{ required: true, message: '请输入变更后地址' }],}]" placeholder="变更后地址" autocomplete="off" />
            </a-form-item>
            <a-form-item label="电话" class="form-item">
              <a-input v-decorator="['replacetelnum',{ initialValue: '', rules: [{ required: true, message: '请输入电话' }],}]" placeholder="电话" autocomplete="off" />
            </a-form-item>
            <a-form-item label="传真" class="form-item">
              <a-input v-decorator="['replacefax',{ initialValue: ''}]" placeholder="传真" autocomplete="off" />
            </a-form-item>
            <a-form-item label="邮政编码" class="form-item">
              <a-input v-decorator="['replaceyzbianma',{ initialValue: ''}]" placeholder="邮政编码" autocomplete="off" />
            </a-form-item>
            <a-form-item label="上传企业地址变更说明（盖企业公章）" class="form-item" >
              <a-row :gutter="24">
                <a-col :span="20">
                  <a-form-item label="文件名称">
                    <div class="from-item-input">
                      <template v-for="(item, i) in docIds">
                        <span :key="i" >{{item.name}}<a-icon class="tip" type="close" @click="deleteDoc(item,i)" /></span>
                      </template>
                    </div>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-upload name="fileName" :action="uploadUrl" accept=".doc,.zip,.png,.jpg,.jpeg,.docx,.xls,.xlsx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :headers="headers" :showUploadList="false" @change="handleChange1" >
                    <a-button  type="primary" class="s-btn">上传附件</a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-item>
            <div class="supplier-footer">
              <a-button  html-type="submit" type="primary" class="s-btn">
                提交
              </a-button>
            </div>
          </div>
          <div v-else>
            <a-form-item label="原联络员姓名" class="form-item">
              <a-input v-decorator="['originxhuilianluoren',{ initialValue: '', rules: [{ required: true, message: '请输入变更后地址' }],}]" placeholder="变更后地址" autocomplete="off" />
            </a-form-item>
            <a-form-item label="现联络员姓名" class="form-item">
              <a-input v-decorator="['replaceusername',{ initialValue: '', rules: [{ required: true, message: '请输入电话' }],}]" placeholder="电话" autocomplete="off" />
            </a-form-item>
            <a-form-item label="性别" class="form-item">
              <a-input v-decorator="['replacesex',{ initialValue: ''}]" placeholder="传真" autocomplete="off" />
            </a-form-item>
            <a-form-item label="单位职务" class="form-item">
              <a-input v-decorator="['replacehiwu',{ initialValue: ''}]" placeholder="邮政编码" autocomplete="off" />
            </a-form-item>
            <a-form-item label="固定电话" class="form-item">
              <a-input v-decorator="['replacezuoji',{ initialValue: ''}]" placeholder="邮政编码" autocomplete="off" />
            </a-form-item>
            <a-form-item label="手机号码" class="form-item">
              <a-input v-decorator="['replacephone',{ initialValue: '', rules: [{ required: true, message: '请输入手机号码' }],}]" placeholder="手机号码" autocomplete="off" />
            </a-form-item>
            <a-form-item label="邮箱" class="form-item">
              <a-input v-decorator="['replaceemail',{ initialValue: ''}]" placeholder="邮政编码" autocomplete="off" />
            </a-form-item>
            <a-form-item label="企业联络员变更申请（盖企业公章）" class="form-item" >
              <a-row :gutter="24">
                <a-col :span="20">
                  <a-form-item label="文件名称">
                    <div class="from-item-input">
                      <template v-for="(item, i) in docIds">
                        <span :key="i" >{{item.name}}<a-icon class="tip" type="close" @click="deleteDoc(item,i)" /></span>
                      </template>
                    </div>
                  </a-form-item>
                </a-col>
                <a-col :span="4">
                  <a-upload name="fileName" accept=".doc,.zip,.png,.jpeg,.jpg,.docx,.xls,.xlsx,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document" :action="uploadUrl" :headers="headers" :showUploadList="false" @change="handleChange2" >
                    <a-button  type="primary" class="s-btn">上传附件</a-button>
                  </a-upload>
                </a-col>
              </a-row>
            </a-form-item>
            <div class="supplier-footer">
              <a-button  html-type="submit" type="primary" class="s-btn">
                提交
              </a-button>
            </div>
          </div>
        </a-form>
      </div>
    </section>
  </div>
</template>
<script>
export default {
  name: 'association',
  data () {
    return {
      list: [],
      form: this.$form.createForm(this),
      html: '',
      docIds: [],
      headers: { authorization: "authorization-text" },
      uploadUrl: `${process.env.VUE_APP_URL}/provider/upload`,
      updateType: 1
    }
  },
  components: {
  },
  computed: {
  },
  created () {
    // this.getArticles()
    // this.getNewTitles()
    this.validToken()
  },
  methods: {
    getArticles () {
      this.$http.getArticles({}, 'YKT_XH').then(res => {
        res.data.list.forEach(v => {
          v.realPath = `${process.env.VUE_APP_SRC}${v.realPath}`
        })
        this.list = res.data.list
      })
    },
    validToken () {
      this.$http.validToken({}).then(res => {
        if (!res.data) {
          this.$router.push({ path: '/login', query: { back: window.location.href, role: 2 } })
        }
      })
    },
    changeType () {
      this.docIds = []
    },
    handleSubmit (e) {
      let _this = this
      if (!this.docIds.length) {
        this.$message.warning('请上传文件')
        return false
      }
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          _this.memberStepForm(values)
        }
      })
    },
    memberStepForm (values) {
      let _this = this
      let params = this.updateType == 1 ? Object.assign(values, { modifyType: this.updateType, filePath: this.docIds[0].fileName, filePath2: this.docIds[1] ? this.docIds[1].fileName : '' }) : Object.assign(values, { modifyType: this.updateType, filePath: this.docIds[0].fileName })
      this.showDialog({
        title: '提示',
        msg: '确认提交吗',
        lBtnText: '取消',
        rBtnText: '确认',
        confCallBack () {
          _this.$http.modifyMemberForm(params).then(res => {
            _this.$message.success(res.data)
          })
        }
      })
    },
    deleteDoc (item, index) {
      this.docIds.splice(index, 1)
    },
    getNewTitles () {
      this.$http.showArticle({}, '100150').then(res => {
        this.html = res.data[0].content
      })
    },
    toDetail (item) {
      this.$router.push({ path: `/fold/${item.id}` })
    },
    handleChange (info) {
      if (info.file.status === "done") {
        this.docIds.push({
          fileName: info.file.response.fileName,
          name: info.file.name
        })
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    handleChange1 (info) {
      if (info.file.status === "done") {
        this.docIds = [{
          fileName: info.file.response.fileName,
          name: info.file.name
        }]
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    handleChange2 (info) {
      if (info.file.status === "done") {
        this.docIds = [{
          fileName: info.file.response.fileName,
          name: info.file.name
        }]
      } else if (info.file.status === "error") {
        this.$message.error(`${info.file.name} file upload failed.`)
      }
    },
    down (url) {
      if (url) {
        window.location.href = url
      }
    }
  }
}
</script>
<style lang="scss">
</style>
